
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var data = {
            'HN':{
                name : '湖南省',
                child : {
                    'CS': {
                        name : '长沙市',
                        child : {
                            'YY':{name:'岳麓区'},
                            'YH':{name:'雨花区'},
                            'FR':{name:'芙蓉区'},
                            'TX':{name:'天心区'},
                            'KF':{name:'开福区'}
                        }
                    },
                    'ZZ': {
                        name : '株洲市',
                        child : {
                            'HT':{name:'荷塘区'},
                            'SF':{name:'石峰区'},
                            'TY':{name:'天元区'},
                            'LS':{name:'芦淞区'}
                        }
                    }
                }
            },
            'GD':{
                name : '广东省',
                child : {
                    'GZ': {
                        name : '广州市',
                        child : {
                            'YX':{name:'越秀区'},
                            'HZ':{name:'海珠区'},
                            'TH':{name:'天河区'},
                            'LW':{name:'荔湾区'},
                            'HD':{name:'花都区'},
                            'HP':{name:'黄埔区'},
                            'BY':{name:'白云区'}
                        }
                    },
                    'SZ': {
                        name : '深圳市',
                        child : {
                            'LF':{name:'罗湖区'},
                            'FT':{name:'福田区'},
                            'NS':{name:'南山区'},
                            'BA':{name:'宝安区'},
                            'LG':{name:'龙岗区'},
                            'YT':{name:'盐田区'}
                        }
                    }
                }
            }
        };

        //清除下拉框
        var clearSelect = function (sels) {
            for (var i = sels.options.length - 1;i > 0;i--){
                sels.removeChild((sels.options[i]))
            }
        };

        //页面加载
        window.onload = function () {
            //先初始化省份的数据
            // 循环便利json数据 for in
            for (var i in data){
                var opt = document.createElement('option');
                opt.textContent = data[i]['name'];
                opt.value = i;
                document.getElementById('sel1').appendChild(opt);
            }


            document.onkeypress = function (e) {
                console.info(e.code + ':' +e.keyCode);
            };

            //onchange 改变的事件
            document.getElementById('sel1').onchange = function () {
                //清除老数据
                clearSelect(document.getElementById('sel2'));
                clearSelect(document.getElementById('sel3'));

                //添加新数据
                if (this.value != ''){
                    var sx_data = data[this.value]['child'];
                    for (var i in sx_data) {
                        var opt = document.createElement('option');
                        opt.textContent = sx_data[i]['name'];
                        opt.value = i;
                        document.getElementById('sel2').appendChild(opt);
                    }
                }
            };

            //
            document.getElementById('sel2').onchange = function () {
                //清除老数据
                clearSelect(document.getElementById('sel3'));
                //添加新数据
                if (this.value != ''){
                    var qy_data = data[document.getElementById('sel1').value]['child'][this.value]['child'];
                    for (var i in qy_data) {
                        var opt = document.createElement('option');
                        opt.textContent = qy_data[i]['name'];
                        opt.value = i;
                        document.getElementById('sel3').appendChild(opt);
                    }
                }
            };
        };
    </script>
</head>
<body>
    <div style="margin: 100px 300px">
        省份：<select id="sel1">
            <option value="">请选择</option>
        </select>
        &nbsp;市县：<select id="sel2">
            <option value="">请选择</option>
        </select>
        &nbsp;区域：<select id="sel3">
            <option value="">请选择</option>
        </select>
    </div>
</body>
</html>